<template>
  <div class="myorder">
    <el-table :data="tableData" stripe style="width: 100%" v-loading="loading" height="680">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="图片">
              <el-image
                style="width: 100px; height: 100px"
                :src="props.row.picture"
                fit="cover"
              ></el-image>
            </el-form-item>
            <br />
            <el-form-item label="订单编号">
              <span>{{ props.row.orderNo }}</span>
            </el-form-item>
            <br />
            <el-form-item label="商品名">
              <span>{{ props.row.goodsName }}</span>
            </el-form-item>
            <br />
            <el-form-item label="数量">
              <span>{{ props.row.num }}</span>
            </el-form-item>
            <br />
            <el-form-item label="进货价格">
              <span>{{ props.row.money }}</span>
            </el-form-item>
            <br />
            <el-form-item label="收货时间">
              <span>{{ props.row.goodsTime | timestampToTime }}</span>
            </el-form-item>
            <br />
            <el-form-item label="供应商">
              <span>{{ props.row.userName }}</span>
            </el-form-item>
            <br />
            <el-form-item label="供应商地址">
              <span>{{ props.row.address }}</span>
            </el-form-item>
            <br />
            <el-form-item label="供应商电话">
              <span>{{ props.row.phone }}</span>
            </el-form-item>
            <br />
            <el-form-item label="支付方式">
              <span>{{ props.row.methodPay | methodPayFilter }}</span>
            </el-form-item>
            <hr />
          </el-form>
        </template>
      </el-table-column>
      <el-table-column prop="stime" label="时间" width="160">
        <template slot-scope="scope">{{
          scope.row.createTime | timestampToTime
        }}</template>
      </el-table-column>
      <el-table-column
        prop="goodsName"
        label="商品名"
        width="140"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column prop="num" label="购买数量" width="70"></el-table-column>
      <el-table-column
        prop="snum"
        label="已售数量"
        width="70"
      ></el-table-column>
      <el-table-column prop="price" label="进货单价" width="100">
        <template slot-scope="scope">
          <el-tag type="info">￥{{ scope.row.price }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="retailPrice" label="建议零售价" width="100">
        <template slot-scope="scope">
          <el-tag>￥{{ scope.row.retailPrice }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="iprice" label="实际零售价" width="100">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.iprice != null"
            >￥{{ scope.row.iprice }}</el-tag
          >
          <el-tag type="danger" v-if="scope.row.iprice == null">请设置</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="work" label="操作">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.orderStatus == 1"
            >配送中</el-tag
          >
          <el-tag type="info" v-if="scope.row.orderStatus == 2"
            >交易完成</el-tag
          >
          <el-tag type="danger" v-if="scope.row.orderStatus == 3"
            >已取消</el-tag
          >
          <el-tag type="warning" v-if="scope.row.orderStatus == 0"
            >等待配送</el-tag
          >
          <el-button
            type="danger"
            :disabled="scope.row.orderStatus != 0"
            style="margin-left: 1.5%"
            size="mini"
            @click="cancelOrder(scope.row.id)"
            >取消订单</el-button
          >
          <el-button
            type="success"
            :disabled="scope.row.orderStatus != 2 || scope.row.iprice != null"
            style="margin-left: 1.5%"
            size="mini"
            @click="open(scope.row.id)"
            >设置零售价</el-button
          >
          <el-button
            type="info"
            :disabled="scope.row.orderStatus != 2 || scope.row.num == scope.row.snum"
            style="margin-left: 1.5%"
            size="mini"
            @click="setNum(scope.row)"
            >已出售数量</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="11"
        @current-change="currentChange"
        :current-page="$store.getters.getMyOrderCurrent"
      >
      </el-pagination>
    </div>
    <el-dialog title="提示" :visible.sync="centerDialogVisible" width="30%">
      <el-input-number
        v-model="num"
        :min="minNum"
        :max="maxNum"
        label="描述文字"
      ></el-input-number>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitNum()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  getOrderList,
  cancel,
  setRetailPrice,
  changeNum,
} from "@/api/orderApi";
// import Vue from 'vue'
// Vue.
export default {
  data() {
    return {
      tableData: [],
      loading: true,
      centerDialogVisible: false,
      num: 1,
      minNum: 1,
      maxNum: 10,
      tempRowData: null,
      total : 0
    };
  },
  filters: {
    timestampToTime(timestamp) {
      if (timestamp == null) {
        return "无";
      } else {
        var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var Y = date.getFullYear() + "-";
        var M =
          (date.getMonth() + 1 < 10
            ? "0" + (date.getMonth() + 1)
            : date.getMonth() + 1) + "-";
        var D =
          (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
        var h =
          (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) +
          ":";
        var m =
          (date.getMinutes() < 10
            ? "0" + date.getMinutes()
            : date.getMinutes()) + ":";
        var s =
          date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
        return Y + M + D + h + m + s;
      }
    },
    methodPayFilter(value) {
      if (value == 0) {
        return "线下货到结算";
      } else if (value == 1) {
        return "支付宝支付";
      } else {
        return "微信支付";
      }
    },
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      getOrderList(this.$store.getters.getMyOrderCurrent).then((res) => {
        // console.log(res.data);
        this.tableData = res.data.orderData;
        this.total = res.data.size
        this.loading = false;
        
      });
    },
    currentChange(current) {
      this.$store.commit("setMyOrderCurrent",current)
      this.loading = true
      this.init()
      // getOrderList(current)
      //   .then((res) => {
      //     if (res.code == 0) {
      //       this.goodsData = res.data.orderData;
      //       this.size = res.data.size;
      //     } else {
      //       this.$message.error(res.messages);
      //     }
      //   })
      //   .catch((err) => {
      //     this.$message.error(err);
      //   });
    },
    submitNum() {
      this.loading = true;
      changeNum({
        id : this.tempRowData.id,
        num : this.num
      })
        .then((res) => {
          if (res.code == 0) {
            this.$message.success("设置成功");
            this.centerDialogVisible = false
            this.init();
          } else {
            this.$message.error(res.message);
            this.loading = false;
            this.centerDialogVisible = false
          }
        })
        .catch((err) => {
          this.loading = false;
          this.centerDialogVisible = false
        });
    },
    setNum(rowData) {
      this.num = rowData.snum;
      this.minNum = rowData.snum;
      this.maxNum = rowData.num;
      if (rowData.iprice == null) {
        this.$message.warning("请先设置零售价");
      } else {
        this.tempRowData = rowData;
        this.centerDialogVisible = true;
      }
    },
    cancelOrder(id) {
      this.$confirm("此操作将取消订单, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.loading = true;
          cancel(id)
            .then((res) => {
              if (res.code == 0) {
                this.$message.success("设置成功");
                this.init();
              } else {
                this.$message.error(res.message);
                this.loading = false;
              }
            })
            .catch((err) => {
              this.loading = false;
            });
        })
        .catch(() => {});
    },
    open(id) {
      this.$prompt("请输入你出售的零售价", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/,
        inputErrorMessage: "价格格式不正确，请输入数字，最多两位小数",
      })
        .then(({ value }) => {
          this.loading = true;
          setRetailPrice({
            id: id,
            price: value,
          })
            .then((res) => {
              if (res.code == 0) {
                this.$message.success("设置成功");
                this.init();
              } else {
                this.$message.error(res.message);
                this.loading = false;
              }
            })
            .catch((err) => {
              this.loading = false;
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
  },
};
</script>
<style scoped>
.myorder {
  height: 750px;
}
span {
  font-weight: bold;
}
.pagination {
  margin: 1.2% 0 0 0;
}
</style>